<template>
	<view class="Global">
		<!-- 背景图片铺满 -->
		<!-- <image class="imagepage" src="/static/background@2x.png" mode=""></image> -->
		<bgImage></bgImage>
		<MyNav :title="title" bgColor="" :backIcon="isback"></MyNav>



		<scroll-view scroll-y="true" class="Content" :style="'height:'+scrollViewHeight+'px'">
			<view class="ContentInner">

				<view class="contentTop">


					<view class="contentTopAbove">
						<image src="/static/logo.png" class="img" mode=""></image>
						<view class="">
							<view class="info">
								<text>{{name}}</text>
								<text class="occupation">{{occupation}}</text>
							</view>
							<view class="department">
								<text>{{department}}</text>
								<image src="/static/logo.png" class="departmentImg" mode=""></image>
							</view>
						</view>
					</view>


					<!-- 下半部分开始 -->
					<view class="contentTopDown">

						<view class="contentTopDownTop">
							<text class="contentTopDownTopText">本月迟到(次)</text>
							<text class="contentTopDownTopText">本月早退(次)</text>
							<text class="contentTopDownTopText">本月工时(小时)</text>
						</view>

						<view class="contentTopDownBottom">
							<text class="contentTopDownBottomText">0</text>
							<text class="contentTopDownBottomText">0</text>
							<text class="contentTopDownBottomText">100</text>
						</view>




					</view>
					<!-- 下半部分结束 -->





				</view>




				<view class="contentInfo">

					<!-- 日历显示 -->
					<view class="contentCalendar">
						<view class="contentCalendarInner">
							<ren-calendar ref='ren' :markDays='markDays' :headerBar='true'
								@onDayClick='onDayClick'></ren-calendar>
						</view>
						<!-- <view class="change">选中日期：{{curDate}}</view> -->
					</view>



					<view class="contentBottom">

						<view class="contentBottomLeft">
							<text class="contentBottomLeftText">上班 08:30</text>
							<view class="contentBottomLeftBottom">
								<image src="/static/gongzuotai/rigth_logo.png" mode="widthFix"
									class="contentBottomLeftBottomImg">
								</image>
								<text class="contentBottomLeftBottomText">08:16已打卡</text>
							</view>
						</view>

						<view class="contentBottomLeft">
							<text class="contentBottomLeftText">下班 17:30</text>
							<view class="contentBottomLeftBottom">
								<image src="/static/gongzuotai/rigth_logo.png" mode="widthFix"
									class="contentBottomLeftBottomImg">
								</image>
								<text class="contentBottomLeftBottomText">08:16已打卡</text>
							</view>
						</view>
					</view>



					<!-- 补卡 非当天-->

					<view class="loginContent">

						<button @click="loginClick()" style="color:#ffffff" class="login"
							type="default">{{login}}</button>
					</view>
					<!-- 补卡 非当天 -->
					
					
					
					<!-- 当天显示的 -->
					<view class="contentCurrentDay">
						<text class="contentCurrentDayTextTop">下班打卡</text>
						<text class="contentCurrentDayTextBottom">17:36:25</text>
					</view>
					
					
					<view class="contentCurrentDayTip">
						<image src="/static/gongzuotai/rigth_logo.png" class="contentCurrentDayTipImg" mode="widthFix"></image>
						<text class="contentCurrentDayTipText">已进入考勤范围：零度空间制衣厂</text>
					</view>
					<!-- 当天显示的 -->
					
					
					<!-- 打开位置超出范围 -->
					<view class="contentCurrentDayOut">
						<text class="contentCurrentDayTextTop">下班打卡</text>
						<text class="contentCurrentDayTextBottom">17:36:25</text>
					</view>
					
					
					<view class="contentCurrentDayTip">
						<image src="/static/gongzuotai/tishi.png" class="contentCurrentDayTipImg" mode="widthFix"></image>
						<text class="contentCurrentDayTipText">当前位置超出打卡范围</text>
					</view>
					<!-- 打开位置超出范围 -->
					
					
					<!-- 选择其他时间查看打卡情况 已打卡时-->
					<view class="contentOtherDay">
						<text class="contentCurrentDayTextTop">已打卡</text>
						<text class="contentCurrentDayTextBottom">17:36:25</text>
					</view>
					<!-- 选择其他时间查看打卡情况 已打卡时-->

				</view>

			</view>
		</scroll-view>


	</view>
</template>

<script>
	import MyNav from '@/components/customnavbar.vue'
	import bgImage from '@/components/backgroundImage.vue'
	import RenCalendar from '@/components/ren-calendar/ren-calendar.vue'

	export default {
		components: {
			MyNav,
			bgImage,
			RenCalendar

		},

		data() {
			return {
				title: '打卡',
				isback: true,
				name: '马化腾',
				occupation: '员工',
				department: '所属部门',

				login: '补卡',
				scrollViewHeight:0,
				


				curDate: '',
				markDays: []

			}
		},
		onLoad() {
			// 在其他页面或组件中访问
			const app = getApp();
			this.scrollViewHeight=app.globalData.scrollViewHeight2
		},

		onReady() {
			let today = this.$refs.ren.getToday().date;
			this.curDate = today;
			this.markDays.push(today);
		},
		methods: {

			onDayClick(data) {
				this.curDate = data.date;

				console.log('选择日期', this.curDate);
			}

		}
	}
</script>

<style>
	
	.contentOtherDay{
		
		width: 250rpx;
		height: 250rpx;
		background: #0AE1C6;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		
		margin-bottom: 30rpx;
	}
	.contentCurrentDayOut{
		
		width: 250rpx;
		height: 250rpx;
		background: #0AE1C6;
		border-radius: 50%;
		
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	.contentCurrentDayTipText{
		display: flex;
		
		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
		
	
	}
	
	.contentCurrentDayTipImg{
		display: flex;
			width: 30rpx;
			height: 30rpx;
			margin-right: 20rpx;
			
	}
	
	.contentCurrentDayTip{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 30rpx;
			margin-bottom: 30rpx;
		
	}
	
	.contentCurrentDayTextBottom{
		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		
		opacity: 0.7;
		display: flex;
		margin-top: 20rpx;
	}
	.contentCurrentDayTextTop{
		
		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 30rpx;
		
		display: flex;
	}
	.contentCurrentDay{
		
		width: 250rpx;
		height: 250rpx;
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);
		border-radius: 50%;
		
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		
	}
	
	.ContentInner {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		
		
		margin-bottom: 30rpx;


	}

	.Content {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		height: 1100rpx;
		width: 100%;
	}

	.loginContent {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;



	}

	.login {
		display: flex;
		justify-content: center;
	
		width: 630rpx;
		height: 100rpx;

		border-radius: 30rpx;
		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		font-weight: bold;
		margin-top: 30rpx;

		margin-bottom: 30rpx;


	
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);

	}

	.contentInfo {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		border-radius: 20rpx;
		background: #FFFFFF;

		margin-top: 30rpx;

	}

	.contentBottomLeftBottomText {

		display: flex;

		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
		line-height: 30rpx;
		margin-left: 20rpx;
		width: 100%;
	}

	.contentBottomLeftBottomImg {

		width: 30rpx;
		height: 30rpx;
		margin-left: 20rpx;
	}

	.contentBottomLeftBottom {

		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
		width: 100%;
		
	

	}

	.contentBottomLeftText {
		display: flex;
		justify-content: left;
		align-items: center;

		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		line-height: 30rpx;
		
		width: 100%;
		padding-left: 30rpx;
		
	}

	.contentBottomLeft {

		width: 300rpx;
		height: 135rpx;
		background: #F5F7F9;
		border-radius: 20rpx;

		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}

	.contentBottom {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		flex-direction: row;
		margin-top: 30rpx;
		width: 100%;
	}


	.contentCalendarInner {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		width: 670rpx;


	}

	.contentCalendar {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		width: 690rpx;



		background: #FFFFFF;
		border-radius: 30rpx;
	}

	.contentTopDownBottomText {

		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		font-family: HarmonyOS Sans SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		width: 33.33%;
		line-height: 36rpx;

	}

	.contentTopDownBottom {

		display: flex;
		justify-content: space-evenly;
		align-items: center;
		width: 100%;
		margin-top: 10rpx;
	}

	.contentTopDownTopText {

		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		line-height: 36rpx;
		width: 33.33%;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.contentTopDownTop {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		width: 100%;

	}

	.contentTopDown {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 670rpx;
		height: 124rpx;
		background: #F3F5F9;
		border-radius: 20rpx;
		margin-top: 30rpx;

		margin-bottom: 10rpx;
	}

	.contentTopAbove {
		display: flex;
		flex-direction: row;
		align-items: left;
		justify-content: left;
		margin-top: 30rpx;
		width: 100%;

	}

	.img {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		margin-left: 30rpx;


	}

	.info {
		margin-left: 32rpx;
		font-weight: bold;
		font-size: 40rpx;
		color: #333333;
		line-height: 40rpx;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: left;
		margin-top: 28rpx;
	}

	.occupation {

		display: flex;
		align-items: center;
		justify-content: center;
		width: 80rpx;
		height: 36rpx;
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);
		border-radius: 18rpx;
		margin-left: 19rpx;
		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 20rpx;
		color: #FFFFFF;
		line-height: 40rpx;

	}

	.department {
		display: inline-flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-left: 32rpx;
		margin-top: 20rpx;
		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;

	}

	.departmentImg {
		width: 10rpx;
		height: 5rpx;
		background: #333333;
		margin-left: 21rpx;
	}

	.infoContent {
		display: flex;
		/* justify-content: center; */
		align-items: center;
		flex-direction: column;


		width: 690rpx;
		height: 240rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 41rpx;
	}

	.contentTop {

		width: 690rpx;
		height: 334rpx;
		background: #FFFFFF;
		border-radius: 30rpx;

		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
</style>